import React, { Fragment } from 'react';
import { getAntd, getEcCom, getLabel } from '../../util/convert';
import './index.less';

export default class Main extends React.Component {
  currentSelectvalue = '';
  constructor(props) {
    super(props);
    window.setLoading = this.setLoading
    this.state = {
      treeDatas: [],
      selectedKeys: [],
      loading: false,
    };
  }
  componentDidMount () {
    this.getMouldList();
  }

  componentWillUnmount () {
    window.setLoading = null;
  }

  componentWillReceiveProps () {
    const { showMouldFieldid, isShowSelectField } = WfForm.getOdocConfig().docParam;
    let selectvalue = -1;
    if (showMouldFieldid == -1) {
      selectvalue = -1;
    } else {
      selectvalue = WfForm.getFieldValue(`field${showMouldFieldid}`) == '' ? -1 : WfForm.getFieldValue(`field${showMouldFieldid}`);
      if (isShowSelectField == 'false' && WfForm.getFieldValue(`field${showMouldFieldid}`) != '') {
        selectvalue = Number(selectvalue) + 100;
      }
    }
    if (selectvalue != this.currentSelectvalue) {
      this.currentSelectvalue = selectvalue;
      this.getMouldList();
    }
  }

  getMouldList = (v) => {
    const { WeaTools } = getEcCom();
    const { workflowid, requestid, showMouldId, showMouldFieldid, isShowSelectField } = WfForm.getOdocConfig().docParam;
    if (this.currentSelectvalue == '') {
      let selectvalue = -1;
      if (showMouldFieldid == -1) {
        selectvalue = -1;
      } else {
        selectvalue = WfForm.getFieldValue(`field${showMouldFieldid}`) == '' ? -1 : WfForm.getFieldValue(`field${showMouldFieldid}`);
        if (isShowSelectField == 'false' && WfForm.getFieldValue(`field${showMouldFieldid}`) != '') {
          selectvalue = Number(selectvalue) + 100;
        }
      }
      this.currentSelectvalue = selectvalue;
    }
    const params = {
      selectvalue: this.currentSelectvalue,
      workflowid,
      requestId: requestid,
      iseditmould: 'isShowmould',
      searchValue: v || '',
    };
    WeaTools.callApi('/api/odoc/odocSelectMould/getMouldList', 'POST', params).then((data) => {
      if (data.api_status && data.mouldList) {
        let mouldList = [];
        data.mouldList.forEach((element, index) => {
          let mouldListDatas = {
            haschild: false,
            isopen: true,
            key: element.mouldid,
            name: element.mouldname,
          };
          mouldList.push(mouldListDatas);
        });
        this.setState({
          treeDatas: mouldList,
          selectedKeys: showMouldId ? [showMouldId.toString()] : [],
        });
      }
    });
  }

  render () {
    const { WeaLeftRightLayout = Fragment } = getEcCom();
    return (
      <div className="odocTemplateList" style={{ height: '100%' }} >
        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@qbevtv`}
          leftWidth={230}
          leftCom={this.getModleListCom()}
          onCollapse={showLeft => this.setIframeWidth(showLeft)}
        />
      </div>
    );
  }
  getModleListCom = () => {
    const { WeaInputSearch = Fragment, WeaTree = Fragment, WeaAlertPage } = getEcCom();
    const { treeDatas, selectedKeys } = this.state;
    return (
      <div style={{ height: '100%' }}>
        <div className="title">
          <span>{`${getLabel('514468', '选择套红模板')}：`}</span>
        </div>
        <div className="search">
          <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@gaga4i`}
            placeholder={getLabel(18510, '请输入模板名称')}
            onSearch={(value) => {
              this.getMouldList(value);
            }}
            onEnter={(value) => {
              this.getMouldList(value);
            }}
            onSearchChange={(value) => {
              if (value == '') {
                this.getMouldList(value);
              }
            }}
          />
        </div>
        {treeDatas.length > 0 ?
          <div className="list">
            <WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@eexdv9`}
              datas={treeDatas}
              selectedKeys={selectedKeys}
              renderNode={node => <span title={node.name}>{node.name}</span>}
              onSelect={(ids, nodeids, nodes, event) => {
                this.getOtherMould(ids);
              }}
            />
          </div>
          :
          <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@w34i9m`} icon="icon-coms-blank" iconSize="65">
            <div style={{ color: '#999' }}>
              {getLabel(83553, '暂无数据')}
            </div>
          </WeaAlertPage>
        }
      </div>
    );
  }
  getOtherMould = (id) => {
    if (this.state.loading) {
      return;
    }
    this.setState({
      selectedKeys: id,
    });
    let iframeWindow;
    const modelId = id[0];
    const { isColumnShow, isTextInFormCanEdit, isTextInForm, docid } = WfForm.getOdocConfig().docParam;

    if (isTextInFormCanEdit && (isColumnShow == '1' || isTextInForm) && docid > 0) {
      if (isColumnShow == '1') {
        iframeWindow = document.getElementsByClassName('wf-req-form-odoc-iframe')[0].contentWindow;
      } else {
        iframeWindow = document.getElementById('requestdocInForm').contentWindow;
      }
    } else {
      iframeWindow = document.getElementsByClassName('req-workflow-odoc')[0].contentWindow;
    }
    // iframeWindow.useTemplateForTH({ mouldType: 'showMould', mouldid: modelId });
    iframeWindow.afterSelectMould(undefined, { id: modelId });
  }
  setIframeWidth = (showLeft) => {
    const iframeclass = document.getElementsByClassName('iframeDiv')[0].classList;
    if (showLeft) {
      iframeclass.remove('set-odocIframe-Width');
      iframeclass.add('setOdocIframeWidth');
    } else {
      iframeclass.remove('setOdocIframeWidth');
      iframeclass.add('set-odocIframe-Width');
    }
  }

  setLoading = (loading) => {
    this.setState({ loading })
  }
}
